<template>
	<view>
		<!-- 一楼导航栏 -->
		<view class="" style="background-color: white; height: 190rpx;">
			<view class="d-flex"
				style="position: fixed;z-index: 1000;background-color: white;height: 190rpx;width: 100%;">
				<view class="search" @tap="hmSearch">
					<image src="@/static/img/index/sousuo1.png" mode="widthFix" style="width: 30rpx;"></image>
					<view class="">{{serchText}}</view>
				</view>

				<view style="height: 70upx;display: flex;align-items: center;top:80upx;position:absolute;right:10px"
					@tap="goVideos()">
					<!-- <image class="list-image" src="@/static/img/index/tea.png" mode="widthFix" /> -->
					<view>视频</view>
				</view>
			</view>
		</view>
		<!-- 二楼navbar -->
		<view class="">
			<!-- <image :src="item.icon" mode="widthFix" style="width: 750rpx; height: 413rpx;"></image> -->
			<swiper circular indicator-dots="true" :autoplay="true" indicator-color="#999"
				indicator-active-color="white" style="width: 750rpx; height: 413rpx;">
				<swiper-item v-for="(item) in icons" :key="item.id">
					<image :src="item.icon" mode="widthFix" style="width: 750rpx; height: 413rpx;"></image>
				</swiper-item>

			</swiper>
		</view>
		<!-- 三楼分类图 -->
		<!-- <view class="d-flex j-sa">
			<view class="d-flex ">
				<image src="@/static/img/index/guanfangshangcheng.png" mode="widthFix"
					style="width: 33rpx; height: 31rpx; margin-top: 25rpx;"></image>
				<view class="fs">官方商城</view>
			</view>
			<view class="d-flex ">
				<image src="@/static/img/index/cunhuopeisong.png" mode="widthFix"
					style="width: 35rpx; height: 25rpx;margin-top: 25rpx;"></image>
				<view class="fs" style="margin-left: 10rpx;">专业葡萄酒配送</view>
			</view>
			<view class="d-flex ">
				<image src="@/static/img/index/zhengpinbaozhangg.png" mode="widthFix"
					style="width: 28rpx; height: 32rpx;margin-top: 25rpx"></image>
				<view class="fs">正品保障</view>
			</view>
		</view> -->
		<!-- 四楼分类图 -->
		<view class=" ">
			<view class="d-flex flex-wrap list-center">
				<view class="list" @tap="gocates()">
					<image class="list-image" src="@/static/img/index/new.png" mode="widthFix" />
					<view class="ls">新品上市</view>
				</view>
				<view class="list" @tap="goSpecial('is_famous_business','名企')">
					<image class="list-image" src="@/static/img/index/famous_business.png" mode="widthFix" />
					<view class="ls">名企</view>
				</view>
				<view class="list" @tap="goSpecial('is_famous_wine','名酒')">
					<image class="list-image" src="@/static/img/index/famous_wine.jpg" mode="widthFix" />
					<view class="ls">名酒</view>
				</view>
				<view class="list" @tap="goSpecial('is_famous_brand','名家')">
					<image class="list-image" src="@/static/img/index/famous.png" mode="widthFix" />
					<view class="ls">名家</view>
				</view>
				<view class="list" @tap="goSpecial('is_tea','名茶')">
					<image class="list-image" src="@/static/img/index/tea.png" mode="widthFix" />
					<view class="ls">名茶</view>
				</view>
				<view class="list" @tap="goBusiness()">
					<image class="list-image" src="@/static/img/index/business.png" mode="widthFix" />
					<view class="ls">商家</view>
				</view>
				<view class="list" @tap="goStamps()">
					<image class="list-image" src="@/static/img/index/stamps.png" mode="widthFix" />
					<view class="ls">名册</view>
				</view>

			</view>
		</view>
		<!-- 五楼推荐图-->
		<view class="" style="background-color:#eff0f2;">
			<view class=" mt-2 pt-2 pb-2">
				<!-- <view class="ml-2" style="border-left: 3rpx solid #e80909;">爆</view> -->
				<view class="ml-2" style="border-left: 5rpx solid #e80909;">
					<view class="ml-2 lp">{{listTitle}}</view>
				</view>
				<view class="d-flex flex-wrap">
					<view class="grid" @tap="godetail(List.id)" v-for="(List) in list" :key="List.id">
						<view class="">
							<image class="grid-image" :src="List.cover_ico" mode="aspectFill"></image>
							<view class="text">{{List.product_name}}</view>
						</view>
						<view class="grid-text">
							{{List.product_introduct}}
						</view>
						<view class="d-flex">
							<view class="flex-1 price">￥{{List.member_price}} </view>
							<view class="sale sale1">已售</view>
							<view class="six  sale1">{{List.sell_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				serchText: '大家都在搜：茶',
				icons: [],
				Classify: [],
				listTitle: '热销爆款',
				list: [],
				interval: 3000
			}
		},
		onLoad() {
			//获取软件最新版本
			// #ifdef APP-PLUS
			this.getNewVersion();
			
			this.timer = setInterval(() => {
				this.getNewVersion();
			}, 60000)
			// #endif
			this.getSlides();
			this.getCates();
			this.getSelectedProduts();
		},

		//下拉刷新
		onPullDownRefresh() {
			this.getSlides();
			this.getCates();
			this.getSelectedProduts();

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		methods: {
			// 二楼bannar图接口
			async getSlides() {
				let res = await this.$myRequest({
					url: '/slides'
				})
				if (res.data.status == 1) {
					this.icons = res.data.data

				}
			},
			// 四楼分类图接口
			async getCates() {
				let Cates = await this.$myRequest({
					url: '/getCates',

				})
				if (Cates.data.status == 1) {
					this.Classify = Cates.data.data
				}
				// console.log(Cates.data.data)
			},
			// 五楼列表图接口
			async getSelectedProduts(field = 'is_hot') {
				if (field == 'is_hot') {
					this.listTitle = '热销爆款'
				}
				let Select = await this.$myRequest({
					url: '/getSelectedProduts',
					data: {
						field: field
					}
				})
				if (Select.data.status == 1) {
					this.list = Select.data.data
				}
			},
			async gocates() {
				uni.$emit('changeFirstCate', {
					index: 0
				})

				uni.switchTab({
					url: '/pages/cate/cate'
				})
				// uni.navigateTo({
				// 	url: '/pages/cate/cate'
				// })
			},

			async gocates() {
				uni.$emit('changeFirstCate', {
					index: 0
				})

				uni.switchTab({
					url: '/pages/cate/cate'
				})
				// uni.navigateTo({
				// 	url: '/pages/cate/cate'
				// })
			},

			goSpecial(field, title) {
				uni.navigateTo({
					url: '/pages/index/ming-qi?field=' + field + '&title=' + title
				})
			},

			hmSearch() {
				uni.navigateTo({
					url: './HM-search'
				})
			},
			async godetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},

			async goVideos() {
				let url = '/pages/videos/videos-list';
				// #ifdef APP-PLUS
				url = '/pages/videos/videos-list-app';
				// #endif
				uni.navigateTo({
					url: url
				})
			},

			goBusiness() {
				uni.navigateTo({
					url: '/pages/business/lists'
				})
			},
			
			goStamps() {
				uni.navigateTo({
					url: '/pages/stamps/lists'
				})
			},
			
			// 获取最新版本
			async getNewVersion() {
				let current_verson = this.$version;
				let res = await this.$myRequest({
					url: '/getSoftVersion'
				})
			
				if (res.data.status == 1) {
			
					if (current_verson != res.data.data) {
			
						// #ifdef H5
			
						// #endif
			
						// #ifdef APP-PLUS
						// this.$api.msg('有新的版本，正在更新，预计需1分钟，请耐心等待！', 'none', 1500)
						switch (uni.getSystemInfoSync().platform) {
							case 'android':
								this.showLoading = true;
								let url = this.$downLoadUrl;
								// console.log(url)  
								uni.downloadFile({
									url, //文件链接
									success: (data) => {
										if (data.statusCode === 200) {
											this.$api.msg('正在下载中...', 'success')
											//文件保存到本地
											uni.saveFile({
												tempFilePath: data
													.tempFilePath, //临时路径
												success: (res) => {
													this.$api.msg('软件已下载',
														'success')
													this.showLoading = false
													setTimeout(() => {
														//打开文档查看
														uni.openDocument({
															filePath: res
																.savedFilePath,
															success: (
																res
															) => {
																// console.log('打开文档成功');
															}
														});
													}, 1500)
												}
											});
										}
									},
									fail: (err) => {
										this.$api.msg('失败请重新下载')
									},
								})
								break;
							case 'ios':
								this.$refs.alertDialogIos.open()
								break;
							default:
								console.log('运行在开发者工具上')
								break;
						}
						// #endif
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.search {
		background-color: #f0f4f7;
		width: 72%;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 50rpx;

		image {
			display: flex;
			margin: 20rpx 30rpx 0 40rpx;
		}

		view {
			font-size: 28rpx;
			color: #545556;
			margin-top: -35rpx;
			margin-left: 90rpx;

		}
	}

	.list-center {
		// justify-content: center;
	}

	.fs {
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-left: 15rpx;
		color: #999;
	}

	.list {
		width: 25%;
		text-align: center;
	}

	.list-image {
		width: 70rpx;
		height: 78rpx;
		margin-left: 10rpx;
		margin-top: 40rpx;
	}

	.ls {
		letter-spacing: 2rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.lp {
		letter-spacing: 2rpx;
	}

	.grid {
		background-color: white;
		width: 345rpx;
		height: 100%;
		border-radius: 20rpx;
		margin-left: 3%;
		margin-top: 25rpx;
	}

	.text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		letter-spacing: 2rpx;
		word-break: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 5rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
	}

	.grid-text {
		color: #999;
		font-size: 24rpx;
		letter-spacing: 3rpx;
		margin: 10rpx 0 20rpx 15rpx;
	}

	.price {
		color: #e80909;
		margin-left: 15rpx;
		margin-bottom: 10rpx;
	}

	.sale1 {
		font-size: 26rpx;
		letter-spacing: 3rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.six {
		margin-left: 10rpx;
		margin-right: 25rpx;
	}

	.grid-image {
		width: 165rpx;
		height: 180rpx;
		margin: 70rpx 0 30rpx 100rpx;
	}
</style>